<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>魔匠科技有限公司</title>
    <meta name="keywords" content="魔匠" />
    <meta name="description" content="魔匠" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="full-screen" content="yes">
    <link rel="stylesheet" href="css/cui.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/less.css" />
</head>

<body>
    <div id="hd">
        <div class="wp">
            <div class="logo"><a href="index1"><img src="images/logo.png" alt=""></a></div>
            <div id="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于魔匠</a></li>
                    <li><a href="service.html" style="color:#e4392a; border-bottom:3px solid #e4392a;">魔匠服务</a></li>
                    <li><a href="case.html">魔匠案例</a></li>
                    <li><a href="news.html">魔匠动态</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <!-- <div class="tel">400-008-0408</div> -->
        </div>
    </div>

    <div class="c"></div>
    <div id="m-hd">
        <a href="index1" class="m-logo"><img src="images/logo.png" alt=""></a>
        <div class="m-trigger"></div>
        <ul class="m-nav">
            <li><a href="index.html" class="v1">首页 </a></li>
            <li><a href="about.html" class="v1">关于魔匠</a></li>
            <li><a href="service.html" class="v1">魔匠服务</a></li>
            <li><a href="case.html" class="v1">魔匠案例</a></li>
            <li><a href="news.html" class="v1">魔匠动态</a></li>
            <li><a href="contact.html" class="v1">联系我们</a></li>
        </ul>
    </div>
    <div class="c"></div>
    <!--  -->
    <div id="bd">
        <div id="ban-in" style="background-image:url(images/banner3.png">
            <!-- <div class="ban-bg"></div> -->
        </div>
        <div class="wp" id="webbuit">
            <div class="tit-i">
                <h3>网站建设</h3>
                <h5>webset <span>design</span></h5>
            </div>
            <div class="about-info">
                <p>
                    我们专注于品质化高端网站构建，<span>企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。</span>
                </p>
                <p>
                    <span>根据客户实际情况1对1的为您提供咨询、研究、分析、策划等服务，从而保障网站建设项目能够顺利达到并超出您预期的商业</span><span>目标。</span>
                </p>
                <p>
                    我们专业提供一站式服务，从网站品牌规划、交互设计、视觉设计、动效创意，到程序开发，运营维护。
                </p>
                <!-- <p>
                    <br />
                </p>
                <p>
                    <br />
                </p> -->
            </div>
            <ul class="ul-webset pr ul-show">
                <li class="li1">
                    <div class="block">
                        <img src="images/w1.png" alt="">
                        <img src="images/w2.png" alt="">
                        <img src="images/w3.png" alt="">
                        <img src="images/w4.png" alt="">
                        <img src="images/w5.png" alt="">
                        <img src="images/w6.png" alt="">
                        <img src="images/w7.png" alt="">
                        <img src="images/w8.png" alt="">
                        <img src="images/w9.png" alt="">
                    </div>
                    <h3>集团网站定制</h3>
                    <a href="javascript:;" class="btn"></a>
                    <div class="webset-pop">
                        <div class="pad">
                            <h2>集团网站建设<a href="javascript:void(0);" class="close"></a></h2>
                            <div class="txt">
                                <h4 class="tit-web">建设</h4>
                                <dl class="ul-txt1">
                                    <dd>集团形象展示平台</dd>
                                    <dd>舆论资讯传播平台</dd>
                                    <dd>产业合作推介平台</dd>
                                    <dd>品牌文化塑造平台</dd>
                                    <dd>人力资源服务平台</dd>
                                    <dd>投资者沟通平台</dd>
                                </dl>
                            </div>
                            <div class="txt">
                                <h4 class="tit-web tit-web1">运维</h4>
                                <dl class="ul-txt1">
                                    <dd>分级权限管理</dd>
                                    <dd>审批审核机制</dd>
                                    <dd>数据分析应用</dd>
                                    <dd>程序功能拓展</dd>
                                    <dd>安全运行机制</dd>
                                </dl>
                            </div>
                            <div class="txt txt1">
                                <h4 class="tit-web tit-web2">策略</h4>
                                <ul class="ul-txt">
                                    <li class="ok">
                                        <h5><a href="javascript:void(0);">网站导航</a></h5>
                                        <div class="txt-1">
                                            <p>良好的用户导航：信息架构的梳理应该符合企业品牌宣传与产品营销的需要；不需要让客户过多思考，全面的导航设置以适应网站不同用户对信息架构的预测，为来访者提供全程的访问导航。</p>
                                        </div>
                                    </li>
                                    <li>
                                        <h5><a href="javascript:void(0);">色彩搭配</a></h5>
                                        <div class="txt-1">
                                            <p>页面传达品牌理念：追求美观、大方、简洁的设计风格；有效传递品牌价格，展现企业形象；秉承“UCD—以用户为中心的设计”原则。</p>
                                        </div>
                                    </li>
                                    <li>
                                        <h5><a href="javascript:void(0);">综合分析</a></h5>
                                        <div class="txt-1">
                                            <p>有效的传递信息：对网站页面内容有效规划，第一时间将有效信息传达给目标受众；内容展现考虑用户体验，帮助访问者加强对品牌和产品信息的认知。</p>
                                        </div>
                                    </li>
                                    <li>
                                        <h5><a href="javascript:void(0);">技术运用</a></h5>
                                        <div class="txt-1">
                                            <p>提高互动性和可能性：利用Web2.0技术增强网站浏览体验，提高信息获取效率，增加更多对用户的个性化服务。</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="li2">
                    <div class="block">
                        <img src="images/q1.png" alt="">
                        <img src="images/q2.png" alt="">
                        <img src="images/q3.png" alt="">
                        <img src="images/q4.png" alt="">
                        <img src="images/q5.png" alt="">
                        <img src="images/q6.png" alt="">
                    </div>
                    <h3>企业网站定制</h3>
                    <a href="javascript:void(0);" class="btn"></a>
                    <div class="webset-pop">
                        <h2>企业网站定制<a href="javascript:void(0);" class="close"></a></h2>
                        <div class="txt">
                            <h4 class="tit-web">建设</h4>
                            <dl class="ul-txt1">
                                <dd>域名 主机 备案</dd>
                                <dd>栏目架构全面 重点突出</dd>
                                <dd>内容深度美化处理</dd>
                                <dd>用户体验友好</dd>
                                <dd>后台易操作 可拓展</dd>
                            </dl>
                        </div>
                        <div class="txt">
                            <h4 class="tit-web tit-web1">运维</h4>
                            <dl class="ul-txt1">
                                <dd>无处不在的在线沟通</dd>
                                <dd>兼容性、安全性、命名规范</dd>
                                <dd>自然排名与收录</dd>
                                <dd>快捷操作、分享概念</dd>
                                <dd>数据反馈与统计分析</dd>
                            </dl>
                        </div>
                        <div class="txt txt1">
                            <h4 class="tit-web tit-web2">策略</h4>
                            <ul class="ul-txt">
                                <li class="ok">
                                    <h5><a href="javascript:void(0);">技术运用</a></h5>
                                    <div class="txt-1">
                                        <p>提高互动性和可能性：利用Web2.0技术增强网站浏览体验，提高信息获取效率，增加更多对用户的个性化服务。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">综合分析</a></h5>
                                    <div class="txt-1">
                                        <p>有效的传递信息：对网站页面内容有效规划，第一时间将有效信息传达给目标受众；内容展现考虑用户体验，帮助访问者加强对品牌和产品信息的认知。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">色彩搭配</a></h5>
                                    <div class="txt-1">
                                        <p>页面传达品牌理念：追求美观、大方、简洁的设计风格；有效传递品牌价格，展现企业形象；秉承“UCD—以用户为中心的设计”原则。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">网站导航</a></h5>
                                    <div class="txt-1">
                                        <p>良好的用户导航：信息架构的梳理应该符合企业品牌宣传与产品营销的需要；不需要让客户过多思考，全面的导航设置以适应网站不同用户对信息架构的预测，为来访者提供全程的访问导航。</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="li3">
                    <div class="block">
                        <img src="images/d1.png" alt="">
                        <img src="images/d2.png" alt="">
                        <img src="images/d3.png" alt="">
                        <img src="images/d4.png" alt="">
                        <img src="images/d5.png" alt="">
                        <img src="images/d6.png" alt="">
                        <img src="images/d7.png" alt="">
                        <img src="images/d8.png" alt="">
                        <img src="images/d9.png" alt="">
                        <img src="images/d10.png" alt="">
                        <img src="images/d11.png" alt="">
                        <img src="images/d12.png" alt="">
                        <img src="images/d13.png" alt="">
                        <img src="images/d14.png" alt="">

                    </div>
                    <h3>电子商务网站定制</h3>
                    <a href="javascript:void(0);" class="btn"></a>
                    <div class="webset-pop">
                        <h2>电商网站定制<a href="javascript:void(0);" class="close"></a></h2>
                        <div class="txt">
                            <h4 class="tit-web">建设</h4>
                            <dl class="ul-txt1">
                                <dd>产品管理系统</dd>
                                <dd>会员系统</dd>
                                <dd>购物车系统</dd>
                                <dd>在线支付系统</dd>
                                <dd>订单管理系统</dd>
                            </dl>
                        </div>
                        <div class="txt">
                            <h4 class="tit-web tit-web1">运维</h4>
                            <dl class="ul-txt1">
                                <dd>接口集成性</dd>
                                <dd>可扩展</dd>
                                <dd>用户体验友好</dd>
                                <dd>安全运行机制</dd>
                                <dd>维护便捷</dd>
                            </dl>
                        </div>
                        <div class="txt txt1">
                            <h4 class="tit-web tit-web2">策略</h4>
                            <ul class="ul-txt">
                                <li class="ok">
                                    <h5><a href="javascript:void(0);">网站导航</a></h5>
                                    <div class="txt-1">
                                        <p>良好的用户导航：信息架构的梳理应该符合企业品牌宣传与产品营销的需要；不需要让客户过多思考，全面的导航设置以适应网站不同用户对信息架构的预测，为来访者提供全程的访问导航。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">色彩搭配</a></h5>
                                    <div class="txt-1">
                                        <p>页面传达品牌理念：追求美观、大方、简洁的设计风格；有效传递品牌价格，展现企业形象；秉承“UCD—以用户为中心的设计”原则。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">综合分析</a></h5>
                                    <div class="txt-1">
                                        <p>提供专业的电子商务解决方案。从集成简单购物车和结算功能的小型电子商务系统，到客户订制的大型复杂电子商务平台。</p>
                                    </div>
                                </li>
                                <li>
                                    <h5><a href="javascript:void(0);">技术运用</a></h5>
                                    <div class="txt-1">
                                        <p>提高互动性和可能性：利用Web2.0技术增强网站浏览体验，提高信息获取效率，增加更多对用户的个性化服务。</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="h50"></div>
        </div>
        <div class="c"></div>
        <div class="bg-blue fix" id="weiweb">
            <div class="wp">
                <div class="tit-i">
                    <h3>H5响应式 交互网站</h3>
                    <h5><span>Responsive</span> Web design</h5>
                </div>
                <div class="about-info">
                    <p>
                        以视觉形象为主，精细而恰当的交互动效，通过Flash、html5特效、视频等先进技术来实现，突出品牌及产品特点和形象，让用户获得耳目一新的视听效果，带来更愉悦的用户体验，传达更具魅力、印象更加深刻。
                    </p>
                </div>
                <ul class="ul-web fix">
                    <li class="li1">
                        <div class="block">
                            <img src="images/n1.png" alt="">
                            <img src="images/n2.png" alt="">
                            <img src="images/n3.png" alt="">
                            <img src="images/n4.png" alt="">
                        </div>
                        <h3>丰富的内容设计</h3>
                    </li>
                    <li class="li2">
                        <div class="block">
                            <img src="images/n5.png" alt="">
                            <img src="images/n6.png" alt="">
                        </div>
                        <h3>html5页面代码</h3>
                    </li>
                    <li class="li3">
                        <div class="block">
                            <img src="images/n7.png" alt="">
                            <img src="images/n8.png" alt="">
                            <img src="images/n9.png" alt="">
                            <img src="images/n10.png" alt="">
                            <img src="images/n11.png" alt="">
                            <img src="images/n12.png" alt="">
                        </div>
                        <h3>css3特效样式</h3>
                    </li>
                    <li class="li4">
                        <div class="block">
                            <img src="images/n13.png" alt="">
                            <img src="images/n14.png" alt="">
                        </div>
                        <h3>H5响应式 交换网站</h3>
                    </li>
                </ul>

            </div>
        </div>
        <div class="wp" id="webmobel">
            <div class="tit-i">
                <h3>移动端&微网站定制</h3>
                <h5>website about <span>mobilephone</span></h5>
            </div>
            <div class="about-info">
                <p>
                    在移动互联时代，我们得出“简单使用，精彩体验”的移动应用开发理念，创造属于无线时代的精彩互联。
                </p>
            </div>
            <div class="c"></div>
            <div class="web-con pr">
                <ul class="ul-tab TAB_CLICK_SLIDE" id=".tab-show">
                    <li class="hover"><a href="javascript:void(0);">
                            <h3>手机网站</h3><span>Mobile web site</span>
                        </a></li>
                    <li><a href="javascript:void(0);">
                            <h3>微网站</h3><span>Micro website</span>
                        </a></li>
                    <li><a href="javascript:void(0);">
                            <h3>微信应用开发</h3><span>WeChat application</span>
                        </a></li>
                </ul>
                <div class="shou"><img src="images/shou.png" alt=""></div>
                <div class="tab-con-box">
                    <div class="tab-show ">
                        <div class="tab-con">
                            <div data-animate="fadeInDown" class="txt animated">
                                <p>手机网站适应手机浏览的网站。通过手机上的浏览器，输入网址，就可以浏览；由于手机的屏幕尺寸和CPU处理能力有限，专门为手机进行优化的网站更为方便用户浏览。</p>
                                <ul class="ul-icon">
                                    <li><b></b><span>移动交互体验</span></li>
                                    <li><b></b><span>与PC数据同步</span></li>
                                    <li><b></b><span>全兼容手机</span></li>
                                    <li><b></b><span>量身定制</span></li>
                                    <li><b></b><span>领先设计</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-show dn">
                        <div class="tab-con">
                            <div data-animate="fadeInDown" class="txt animated">
                                <p>终端以微信为核心载体的微型站点，使其成为移动端的全新信息载体，与微信公众平台无缝对接，展示互动，应有尽用，，让移动网络推广变得更简单。</p>
                                <ul class="ul-icon">
                                    <li><b></b><span>微官网</span></li>
                                    <li><b></b><span>微信营销</span></li>
                                    <li><b></b><span>微博营销</span></li>
                                    <li><b></b><span>手机展示</span></li>
                                    <li><b></b><span>互动功能</span></li>
                                    <li><b></b><span>数据同步</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-show dn">
                        <div class="tab-con">
                            <div data-animate="fadeInDown" class="txt animated">
                                <p>针对不同行业，提供更多智能功能的微信基础服务系统平台。同时可以根据您的需求进行高级功能定制与开发。</p>
                                <ul class="ul-icon">
                                    <li><b></b><span>微信支付</span></li>
                                    <li><b></b><span>微信红包</span></li>
                                    <li><b></b><span>微菜单</span></li>
                                    <li><b></b><span>微会员系统</span></li>
                                    <li><b></b><span>微广告推送</span></li>
                                    <li><b></b><span>微官网</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pic">
                    <div class="flexslider">
                        <ul class="slides">
                            <li><img src="images/14423868578860.jpg" alt="" class="img"></li>
                            <li><img src="images/14423880884104.jpg" alt="" class="img"></li>
                            <li><img src="images/14423881046487.jpg" alt="" class="img"></li>

                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="c"></div>
        <div class="service" id="servweb">
            <div class="wp">
                <div class="tit-i tit-i-1">
                    <h3>服务流程</h3>
                    <h5>service process</h5>
                    <em></em>
                </div>
                <div class="about-info">
                    <p>
                        我们专业提供一站式服务，从网站品牌规划、视觉设计、<span>交互设计、</span>动效创意，到程序开发，运营维护。<span>魔匠科技有限公司</span><span>18</span><span>年成立到现在</span><span></span><span>，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。</span>
                    </p>
                    <p>
                        <p>
                            <span></span>
                        </p>
                    </p>
                </div>
                <div class="process">
                    <div class="con">
                        <div class="pad">
                            <img src="images/process_bg.png" alt="">
                            <div class="txt">
                                <span class="s1">需求</span>
                                <span class="s2">评估</span>
                                <span class="s3">协议</span>
                                <span class="s4">规划</span>
                                <span class="s5">风格沟通</span>
                                <span class="s6">设计</span>
                                <span class="s7">设计修改/确认</span>
                                <span class="s8">前端制作</span>
                                <span class="s9">开发</span>
                                <span class="s10">程序开发</span>
                                <span class="s11">上线</span>
                                <span class="s12">售后服务</span>
                            </div>
                            <div class="icon">
                                <em class="q1"></em>
                                <em class="q2"></em>
                                <em class="q3"></em>
                                <em class="q4"></em>
                                <em class="q5"></em>
                                <em class="q6"></em>
                                <em class="q7"></em>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="solution" id="solution">
            <div class="wp">
                <div class="tit-i">
                    <h3>行业解决方案</h3>
                    <h5>industry solution</h5>
                    <em></em>
                </div>
                <ul class="ul-solution">
                    <li class="li1"><a href=""><span></span><em>IT行业</em></a></li>
                    <li class="li2"><a href=""><span></span><em>制造行业</em></a></li>
                    <li class="li3"><a href=""><span></span><em>服装行业</em></a></li>
                    <li class="li4"><a href=""><span></span><em>健康行业</em></a></li>
                    <li class="li5"><a href=""><span></span><em>地产行业</em></a></li>
                    <li class="li6"><a href=""><span></span><em>美容行业</em></a></li>
                    <li class="li7"><a href=""><span></span><em>传媒行业</em></a></li>
                    <li class="li8"><a href=""><span></span><em>家电行业</em></a></li>
                    <li class="li9"><a href=""><span></span><em>汽车行业</em></a></li>
                    <li class="li10"><a href=""><span></span><em>烟酒行业</em></a></li>
                    <li class="li11"><a href=""><span></span><em>教育行业</em></a></li>
                    <li class="li12"><a href=""><span></span><em>政府机构</em></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--  -->
    <div class="c"></div>
    <div id="fd" class="index-fd pr">
        <div class="map-bg3"></div>
        <div class="wp">
            <div class="fd-top">
                <dl>
                    <dt>关于魔匠</dt>
                    <dd>
                        <ul class="ul-fd">
                            <li><a href="">我们是谁</a></li>
                            <li><a href="">我们服务的客户</a></li>
                            <li><a href="">我们的团队</a></li>
                            <li><a href="">客户监控系统</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>魔匠服务</dt>
                    <dd>
                        <ul class="ul-fd">
                            <li><a href="">网站建设</a></li>
                            <li><a href="">H5响应式 交互网站</a></li>
                            <li><a href="">移动端 & 微网站定制</a></li>
                            <li><a href="">服务流程</a></li>
                            <li><a href="">行业解决方案</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>魔匠案例</dt>
                    <dd>
                        <ul class="ul-fd ul-fd2">
                            <li><a href=""></a></li>
                            <li><a href="">平台电商</a></li>
                            <li><a href="">HTML5</a></li>
                            <li><a href="">企业网站</a></li>
                            <li><a href="">集团公司</a></li>
                            <li><a href="">加工制造</a></li>
                            <li><a href="">酒店餐饮</a></li>
                            <li><a href="">金融投资</a></li>
                            <li><a href="">汽车地产</a></li>
                            <li><a href="">科技电子</a></li>
                            <li><a href="">影视传媒</a></li>
                            <li><a href="">生物医疗</a></li>
                            <li><a href="">教育培训</a></li>
                            <li><a href="">政府机关</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>魔匠动态</dt>
                    <dd>
                        <ul class="ul-fd">
                            <li><a href="">公司动态</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>联系我们</dt>
                    <dd class="pr">
                        <p><a href="" class="weixin"></a><a href="" class="sina"></a><span class="weixin-pic"><img src="images/ewm.jpg"
                                    alt=""></span></p>
                        <p><b class="tel">400-008-0408</b></p>
                        <h5>魔匠服务热线</h5>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="fd-copy">
            <div class="wp">
                <p>
                    <span>杭州魔匠科技有限公司 Copyright&copy;</span><a href=""><span>京ICP备07017583号-1</span></a>
                    <a href=""></a>
                </p>
            </div>
        </div>
    </div>
    <div class="side">
        <ul>
            <li><a href="">
                    <!-- <div class="sidebox"><img src="images/side_icon02.png">在线咨询</div> -->
                </a></li>
            <li><a href="">
                    <!-- <div class="sidebox"><img src="images/side_icon01.png">在线咨询
                        QQ:16757330
                    </div> -->
                </a></li>
            <li><a href="javascript:void(0);">
                    <div class="sidebox"><img src="images/side_icon03.png">4000080408</div>
                </a></li>
        </ul>
    </div>
    <div class="side2">
        <ul>
            <li><a href=""><img src="images/r_icon1.png" alt=""></a>
                <div class="weixin"><em></em><img src="images/ewm.jpg" alt=""></div>
            </li>
            <li><a href="javascript:goTop();" class="sidetop"><img src="images/r_icon2.png"></a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/animate.css" />
    <script type="text/javascript" src="js/lib.js"></script>
    <link rel="stylesheet" href="css/flexslider.css" />
    <script type="text/javascript" src="js/flexslider.js"></script>
    <script>
        var progressMove = false;

        function checkMhd() {
            isMobile = $('#m-hd').is(':visible');
        }

        $(window).resize(function () {
            var process = $('.process');
            checkMhd();
            if (isMobile) {
                process.removeClass('animate-box');
            } else {
                process.addClass('animate-box');
            }
        }).resize();

        $(window).scroll(function () {
            showWeb();
            showMobilephone();
            showProcess();
            showSolution();
        });

        function showWeb() {
            if (isScrolledIntoView('.ul-web')) {
                $('.ul-web li').each(function (i) {
                    $(this).delay(i * 800).fadeIn(50, function () {
                        $(this).find('img').each(function (j) {
                            $(this).delay(j * 200).animate({ opacity: 1 });
                        })
                    });
                })
            }
        }

        function showProcess() {
            if (isScrolledIntoView('.process')) {
                $('.process .icon').each(function () {
                    $(this).find('em').each(function (i) {
                        $(this).delay(i * 500).animate({ opacity: 1 });
                    })
                })
            }
        }

        /*function showProcess(){
         if( isScrolledIntoView('.process') ){
         if(isMobile){return;}
         if(progressMove){return;}
         if( !$('.process').is(':animated') ){
         $('.process').css('width',0).animate({width: '100%'},2000,function(){progressMove = true;});
         }
         }
         }*/

        function showMobilephone() {
            if (isScrolledIntoView('.tab-show')) {
                $('.tab-show .pic').each(function () {
                    $(this).addClass($(this).data('animate'));
                })
                $('.tab-show .txt').each(function () {
                    $(this).addClass($(this).data('animate'));
                })
            }

        }
        function showSolution() {
            if (isScrolledIntoView('.ul-solution', 300)) {
                $(".ul-solution").each(function () {
                    $(".ul-solution li").animate({ left: 0, top: 0, opacity: 1 })
                })
            }
        }


        $('.ul-webset li a.close').click(function () {
            $('.ul-webset li .webset-pop').css({
                opacity: 0,
                left: '-100%',
                zIndex: -1
            });
        })
        $('.webset-pop .li2 a.close').click(function () {
            $('.webset-pop').hide();
        })
        $('.webset-pop .li3 a.close').click(function () {
            $('.webset-pop').hide();
        })


        $('.ul-txt li').click(function () {
            var txt = $(this).find('.txt-1');
            var _this = this;
            if (!txt.is(":visible")) {
                $('.ul-txt li .txt-1').slideUp(500);
                txt.stop(false, true).slideDown(function () {
                    $('.ul-txt li').removeClass('ok');
                    $(_this).addClass('ok');
                });
            } else {
                var _this = this;
                txt.stop(false, true).slideUp(500, function () {
                    $('.ul-txt li').removeClass('ok');
                });
            }
        });

        $('.ul-webset li .btn').click(function () {
            var webset_pop = $(this).parents('li').find('.webset-pop');
            webset_pop.css({ zIndex: 10 }).animate({
                opacity: 1,
                left: 0
            });
        });

        /*$(".ul-solution li").each(function (index, element) {
         if (index % 6 > 1) {
         $(this).css({ left: (index % 6 - 1) * 300 / (1 + Math.floor((index) / 6)) * 0.5,opacity: 0 });
         } else {
         $(this).css({ left: (index % 6 - 2) * 300 / (1 + Math.floor(index / 6)) * 0.5,opacity: 0 });
         }
         });*/

        $(document).ready(function (e) {

            $(".ul-solution li").hover(function () {
                $(this).find("span").animate({ top: 5 }, 300)
            }, function () {
                $(this).find("span").animate({ top: 0 }, 300)

            })
        });


        $('.web-con .flexslider').flexslider({
            animation: "slide",
            animationLoop: true,
            slideshow: false,
            prevText: "",
            nextText: "",
            controlNav: true,
            directionNav: true
        });
        $(".TAB_CLICK_SLIDE li").click(function () {
            var tab = $(this).parent(".TAB_CLICK_SLIDE");
            var con = tab.attr("id");
            var idx = tab.find("li").index(this);
            $(this).addClass('hover').siblings(tab.find("li")).removeClass('hover');
            $(con).eq(idx).show().siblings(con).hide();
            $('.web-con .flexslider').flexslider(idx);
        });
    </script>
</body>

</html>